<template>
  <view>
    <uni-card :is-shadow="false" is-full>
      <uni-title
        type="h1"
        title="按更新日期倒序排列"
        align="center"
        color="#027fff"
      ></uni-title>
    </uni-card>
    <uni-section title="">
      <uni-search-bar
        radius="100"
        placeholder="收费站名称"
        @confirm="handleSearch"
        :focus="true"
        clearButton="auto"
        cancelButton="auto"
        v-model="searchValue"
      >
      </uni-search-bar>

      <uni-list v-for="(item, index) in list" :key="index" class="item">
        <!-- <uni-list-item title="开启点击反馈" clickable @click="onClick"></uni-list-item>
				  <uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index"
					  @click="onClick($event,1)"></uni-list-item>
				  <uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					  @click="onClick($event,1)"></uni-list-item> -->
        <uni-list-item title="" direction="column">
          <!-- 自定义 header -->
          <!-- 自定义 header -->
          <template v-slot:header>
            <text class="label">收费站名称：{{ item.name }}</text>
          </template>
          <!-- 自定义 body -->
          <template v-slot:body>
            <text class="label">省域编码：{{ item.provincialCode }}</text>
          </template>
          <!-- 自定义 footer-->
          <template v-slot:footer>
            <text class="label">收费站编号：{{ item.number }}</text>
            <text class="label">收费站HEX：{{ item.hex }}</text>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-section>

    <uni-fab
      :pattern="pattern"
      :content="content"
      :horizontal="horizontal"
      :vertical="vertical"
      :direction="direction"
      @trigger="trigger"
    ></uni-fab>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
// import { fetchFreeCar } from "./constant";

const horizontal = ref("right");
const vertical = ref("bottom");
const direction = ref("horizontal");
const pattern = ref({
  icon: "cloud-download",
  color: "#7A7E83",
  backgroundColor: "#fff",
  selectedColor: "#007AFF",
  buttonColor: "darkorange",
  iconColor: "#fff",
});
const content = ref([
  {
    iconPath: "/static/nav-car-icon.png",
    selectedIconPath: "/static/nav-car-active-icon.png",
    text: "更新数据",
    active: false,
  },
  {
    iconPath: "/static/nav-error-car-icon.png",
    selectedIconPath: "/static/nav-error-car--active-icon.png",
    text: "清除数据",
    active: false,
  },
]);
const list = ref([]);
const searchValue = ref("");
const Host = import.meta.env.VITE_HOST;
const storageKey = "stationList";

onLoad(() => {
  setTimeout(function () {
    console.log("start pulldown");
  }, 1000);
  uni.startPullDownRefresh();
  uni.getStorage({
    key: storageKey,
    success: (res) => {
      list.value = JSON.parse(res.data);
    },
  });
});

const trigger = (e) => {
  console.log(e);
  content.value[e.index].active = !content.value[e.index].active;
  if (e.index === 0) {
    uni.request({
      url: Host + "/api/station?per_page=10",
      success: (res) => {
        console.log(res.data);
        const specialCarList = res.data.data;
        if (specialCarList) {
          uni.setStorage({
            key: storageKey,
            data: JSON.stringify(specialCarList),
            success: () => {
              console.log("setStorage success");
            },
            fail: () => {
              console.log("setStorage fail");
            },
          });
          list.value = specialCarList;
        }
      },
      fail: () => {
        console.log("request fail");
      },
    });
    content.value[e.index].active = false;
    uni.showToast({
      title: "更新成功",
      icon: "none",
    });
  } else if (e.index === 1) {
    console.log("removeStorage");
    uni.removeStorage({
      key: storageKey,
    });
    list.value = [];
    content.value[e.index].active = false;
    uni.showToast({
      title: "清除成功",
      icon: "none",
    });
  }
};
const handleSearch = async (res) => {
  uni.showToast({
    title: "搜索：" + res.value,
    icon: "none",
  });
  const searchValueLocal = res.value.toLowerCase();
  const dbName = "main";
  const dbPath = "_www/static/carlList.sqlite3";
  if (
    !plus.sqlite.isOpenDatabase({
      name: dbName,
      path: dbPath,
    })
  ) {
    plus.sqlite.openDatabase({
      name: dbName,
      path: dbPath,
    });
  }

  try {
    // 构建 SQL 查询语句
    let sql = "SELECT * FROM stations WHERE lower(name) LIKE '%";
    sql += searchValueLocal;
    sql += "%'";

    // 执行查询
    plus.sqlite.selectSql({
      name: dbName,
      sql: sql,
      success: function (data) {
        console.log("selectSql success: ");
        list.value = data;
      },
      fail: function (e) {
        console.log("selectSql failed: " + JSON.stringify(e));
      },
    });

    // 关闭数据库连接

    plus.sqlite.closeDatabase({
      name: dbName,
    });
  } catch (error) {
    console.error("查询失败", error);
  }
};
</script>

<style>
.content {
  padding: 15px;
  position: relative;
  margin-bottom: 20px;
}
.search {
  position: fixed;
  left: 15px;
  right: 15px;
  top: 0;
  background-color: #fff;
  border: 1px orange solid;
  border-radius: 50px;
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  box-shadow: 0 2px 2px #dfdfdf;
}
.search-btn {
  background-color: orange;
  border-radius: 0 50px 50px 0;
  color: #fff;
  padding: 0 10px;
}
.list {
  margin-top: 30px;
}
.item {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 0;
  padding: 15px;
}
.label {
  color: #666;
}
.check-img-btn {
  color: royalblue;
}
</style>
